<template>
	<view class="my-page">
		<!-- 顶部用户信息 -->
		<view class="user-info">
			<view class="avatar-container">
				<image class="avatar" src="/static/images/avatar-default.png" mode="widthFix" alt="用户头像"></image>
			</view>
			<view class="user-detail">
				<view class="user-name">游客用户</view>
				<view class="user-id">ID: 887654321</view>
			</view>
		</view>

		<!-- 内容标签页 -->
		<view class="tabs">
			<view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">
				<text class="tab-text">我的试用</text>
			</view>
			<view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">
				<text class="tab-text">我的收藏</text>
			</view>
		</view>

		<!-- 咨询列表 -->
		<view class="content" v-if="currentTab === 0">
			<view class="collect-item" v-for="(item, index) in consultList" :key="index" @click="gotoHb">
				<image class="collect-img" :src="item.ImageUrl" mode="widthFix" :alt="item.title"></image>
				<view class="collect-info">
					<view class="collect-title">{{item.SystemSoftwareName}}</view>
					<view class="collect-desc">{{item.CustomName}}</view>
					<view class="collect-lxw">
						<i class="iconfont" style="color: #000;display: inline-block;margin-right: 10px;">&#xe617;</i>
						联系客服
					</view>
					<!-- <view class="collect-time">{{ formatTime(item.collectTime) }}</view> -->
				</view>
				<!-- <image class="collect-icon" src="/static/images/icon-collected.png" mode="widthFix" alt="已收藏"
					@click.stop="cancelCollect(index)"></image> -->
			</view>

			<view class="empty" v-if="consultList.length === 0">
				<!-- <image class="empty-icon" src="/static/images/empty-collect.png" mode="widthFix" alt="暂无收藏"></image> -->
				<text class="empty-text">暂无试用内容</text>
			</view>
		</view>

		<!-- 收藏列表 -->
		<view class="content" v-if="currentTab === 1">
			<view class="collect-item" v-for="(item, index) in collectList" :key="index" @click="gotoInfo(item)">
				<image class="collect-img" :src="item.ImageUrl" mode="widthFix" :alt="item.title"></image>
				<view class="collect-info">
					<view class="collect-title">{{item.SystemSoftwareName}}</view>
					<!-- <view class="collect-desc">xxx公司</view> -->
					<view class="collect-time">{{ formatTime(item.collectTime) }}</view>
				</view>
				<image class="collect-icon" src="/static/images/icon-collected.png" mode="widthFix" alt="已收藏"
					@click.stop="cancelCollect(index)"></image>
			</view>

			<view class="empty" v-if="collectList.length === 0">
				<image class="empty-icon" src="/static/images/empty-collect.png" mode="widthFix" alt="暂无收藏"></image>
				<text class="empty-text">暂无收藏内容</text>
			</view>
		</view>

		<!-- 底部导航 -->
		<view class="bottom-nav">
			<view class="nav-item" @click="goHome">
				<i class="iconfont nav-icon" style="color: #01AEFD;">&#xe614;</i>
				<text>首页</text>
			</view>
			<view class="nav-item" @click="showShareModal = true">
				<i class="iconfont nav-icon" style="color: #02D768;">&#xe66c;</i>
				<text>分享</text>
			</view>
			<view class="nav-item" @click="goShare">
				<i class="iconfont nav-icon" style="color: #FD2624;">&#xe60e;</i>
				<text>抢优惠</text>
			</view>
			<view class="nav-item" @click="goMy">
				<i class="iconfont nav-icon" style="color: #000;">&#xe608;</i>
				<text>我的</text>
			</view>
		</view>

		<!-- 分享弹层 -->
		<view class="share-modal-mask" v-if="showShareModal" @click="showShareModal = false"></view>
		<view class="share-modal" :class="{ 'share-modal-show': showShareModal }">
			<view class="share-title">分享到</view>
			<view class="share-options">
				<!-- 分享给好友按钮 -->
				<button class="share-btn friend-btn" open-type="share" @click="setShareData('friend')">
					<i class="iconfont share-icon" style="color: #02D768;">&#xe609;</i><br />
					分享给好友
				</button>

				<!-- 分享到朋友圈按钮 -->
				<button class="share-btn timeline-btn" @click="shareToTimeline">
					<i class="iconfont share-icon" style="color: #02D768;">&#xe669;</i><br />
					分享到朋友圈
				</button>
				<!-- <view class="share-option" @click="shareToFriend">
					<i class="iconfont share-icon" style="color: #02D768;">&#xe609;</i>
					<text class="share-text">分享给朋友</text>
				</view>
				<view class="share-option" @click="shareToTimeline">
					<i class="iconfont share-icon" style="color: #02D768;">&#xe669;</i>
					<text class="share-text">分享朋友圈</text>
				</view> -->
			</view>
			<!-- <view class="share-cancel" @click="showShareModal = false">取消</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前标签页 0:咨询列表 1:收藏列表
				currentTab: 0,
				// 未读消息数量
				unreadCount: 3,
				// 咨询列表数据
				consultList: [],
				// 收藏列表数据
				collectList: [],
				// 分享弹层显示状态
				showShareModal: false,
				shareType: 'friend', // 分享类型：friend/timeline
				shareData: {
					title: '唐云科技',
					path: '/pages/index/index', // 分享路径
					imageUrl: 'https://tangyun.tangyuntech.com/Images/UploadImages/915f98fd49a149238bac4595a4e87582.png' // 分享图片
				}
			};
		},
		mounted() {
			this.getList()
			this.getList2()
		},
		methods: {
			getList() {
				uni.request({
					url: 'https://tangyun.tangyuntech.com/CustomManageApi/GetCustomList',
					method: 'POST',
					data: {
						openId: wx.getStorageSync('openid'),
						customId: '',
						keyWord: '',
						pageIndex: 1,
						pageSize: 10,
					},
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('调用成功:', res);
							this.consultList = res.data.data.data
						} else {
							console.error('调用失败', res.data);
						}
					},
					fail: (err) => {
						console.error('请求后端接口失败', err);
					}
				});
			},
			getList2() {
				uni.request({
					url: 'https://tangyun.tangyuntech.com/SystemSoftwareOperationRecordApi/GetSystemSoftwareOperationRecordList',
					method: 'POST',
					data: {
						openId: wx.getStorageSync('openid'),
						systemSoftwareId: '',
						pageIndex: 1,
						pageSize: 10,
					},
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('调用成功:', res);
							this.collectList = res.data.data.data
						} else {
							console.error('调用失败', res.data);
						}
					},
					fail: (err) => {
						console.error('请求后端接口失败', err);
					}
				});
			},
			// 切换标签页
			switchTab(index) {
				this.currentTab = index;
			},

			// 格式化时间
			formatTime(timeStr) {
				if (!timeStr) return "";
				const date = new Date(timeStr);
				return `${date.getFullYear()}-${this.padZero(date.getMonth() + 1)}-${this.padZero(date.getDate())} ${this.padZero(date.getHours())}:${this.padZero(date.getMinutes())}`;
			},

			// 补零函数
			padZero(num) {
				return num < 10 ? `0${num}` : num;
			},

			// 取消收藏
			cancelCollect(index) {
				uni.showModal({
					title: "提示",
					content: "确定要取消收藏吗？",
					success: (res) => {
						if (res.confirm) {
							this.collectList.splice(index, 1);
							uni.showToast({
								title: "取消收藏成功",
								icon: "success"
							});
						}
					}
				});
			},

			// 页面跳转
			goShare() {
				uni.reLaunch({
					url: '/pages/home/couponList'
				})
			},
			goHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			goMy() {
				uni.reLaunch({
					url: '/pages/home/my'
				})
			},

			// 设置分享数据
			setShareData(type) {
				this.shareType = type;
				// 可以根据类型动态修改分享内容
				if (type === 'friend') {
					this.shareData.title = '快来看看这个内容！';
				} else {
					this.shareData.title = '推荐一个好东西给大家';
				}
			},
			gotoHb() {
				uni.navigateTo({
					url: '/pages/home/hb'
				});
			},
			gotoInfo(item) {
				var qr = JSON.stringify(item)
				uni.navigateTo({
					url: '/pages/productDetail/productDetail?qr=' + qr
				});
			},

			// 触发朋友圈分享
			shareToTimeline() {
				// 先设置分享类型
				this.setShareData('timeline');

				// 检查是否支持朋友圈分享
				if (wx.canIUse('onShareTimeline')) {
					// 显示分享菜单，指定支持的分享类型
					wx.showShareMenu({
						withShareTicket: true,
						menus: ['shareTimeline'] // 只显示朋友圈分享
					});

					// 主动触发分享行为
					wx.updateShareMenu({
						showShareItems: ['shareTimeline'],
						success: () => {
							console.log('已准备好朋友圈分享');
						}
					});
				} else {
					uni.showToast({
						title: '当前微信版本不支持朋友圈分享',
						icon: 'none'
					});
				}
			}
		},
		// 分享给好友的生命周期函数
		onShareAppMessage() {
			// 根据shareType返回不同的分享内容
			return {
				title: this.shareType === 'friend' ? '唐云科技已帮上千家外贸公司、工厂升级转型' : this.shareData.title,
				path: this.shareData.path,
				imageUrl: this.shareData.imageUrl,
				success: () => {
					uni.showToast({
						title: '分享好友成功',
						icon: 'success'
					});
					this.showShareModal = false
				},
				fail: (err) => {
					console.error('分享好友失败', err);
				}
			};
		},

		// 分享到朋友圈的生命周期函数
		onShareTimeline() {
			return {
				title: this.shareType === 'timeline' ? '朋友圈专属分享标题' : this.shareData.title,
				path: this.shareData.path,
				imageUrl: this.shareData.imageUrl,
				success: () => {
					uni.showToast({
						title: '分享朋友圈成功',
						icon: 'success'
					});
				},
				fail: (err) => {
					console.error('分享朋友圈失败', err);
				}
			};
		},

	};
</script>

<style scoped>
	.my-page {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 50px;
		/* 为底部导航留出空间 */
	}

	/* 用户信息区域 */
	.user-info {
		background-color: #3e7bfa;
		padding: 24px 16px;
		display: flex;
		align-items: center;
	}

	.avatar-container {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		overflow: hidden;
		background-color: #fff;
		padding: 2px;
	}

	.avatar {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.user-detail {
		margin-left: 16px;
		flex: 1;
	}

	.user-name {
		font-size: 18px;
		color: #fff;
		font-weight: bold;
		margin-bottom: 4px;
	}

	.user-id {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.8);
	}

	/* 标签页 */
	.tabs {
		display: flex;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.tab-item {
		flex: 1;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.tab-item.active .tab-text {
		color: #3e7bfa;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 3px;
		background-color: #3e7bfa;
		border-radius: 3px;
	}

	.tab-text {
		font-size: 16px;
		color: #666;
	}

	/* 内容区域 */
	.content {
		padding: 16px;
	}

	/* 咨询列表 */
	.consult-item {
		background-color: #fff;
		border-radius: 8px;
		padding: 16px;
		margin-bottom: 12px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.consult-title {
		font-size: 16px;
		color: #333;
		font-weight: bold;
		margin-bottom: 8px;
	}

	.consult-content {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
		margin-bottom: 12px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.consult-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.consult-time {
		font-size: 12px;
		color: #999;
	}

	.consult-status {
		font-size: 12px;
		padding: 2px 8px;
		border-radius: 12px;
	}

	.consult-status.replied {
		background-color: #e6f7ed;
		color: #2a9d54;
	}

	.consult-status.pending {
		background-color: #fff7e6;
		color: #fa8c16;
	}

	/* 收藏列表 */
	.collect-item {
		background-color: #fff;
		border-radius: 8px;
		padding: 12px;
		margin-bottom: 12px;
		display: flex;
		align-items: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.collect-img {
		width: 80px;
		height: 80px;
		border-radius: 4px;
		object-fit: cover;
	}

	.collect-info {
		flex: 1;
		margin-left: 12px;
		overflow: hidden;
	}

	.collect-title {
		font-size: 15px;
		color: #333;
		margin-bottom: 4px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.collect-desc {
		font-size: 13px;
		color: #666;
		margin-bottom: 8px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		line-height: 1.4;
	}

	.collect-lxw {
		position: absolute;
		right: 45px;
		margin-top: -36px;
	}

	.collect-time {
		font-size: 12px;
		color: #999;
	}

	.collect-icon {
		width: 24px;
		height: 24px;
	}

	/* 空状态 */
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40px 0;
	}

	.empty-icon {
		width: 80px;
		height: 80px;
		margin-bottom: 16px;
	}

	.empty-text {
		font-size: 14px;
		color: #999;
		margin-bottom: 20px;
	}

	.empty-btn {
		background-color: #3e7bfa;
		color: #fff;
		border: none;
		padding: 8px 24px;
		border-radius: 20px;
		font-size: 14px;
	}

	/* 适配小程序 */
	::v-deep button {
		line-height: normal;
	}

	/* 底部导航 */
	.bottom-nav {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 50px;
		border-top: 1px solid #ccc;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		z-index: 10;
		/* 确保导航在内容上方 */
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav-icon {
		width: 20px;
		height: 20px;
	}

	.trial-btn {
		background-color: #ff0000;
		color: #fff;
		padding: 10px 20px;
		border-radius: 5px;
	}

	/* 分享弹层样式 */
	.share-modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 100;
	}

	.share-modal {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 30vh;
		/* 高度为屏幕的30% */
		background-color: #fff;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		transform: translateY(100%);
		transition: transform 0.3s ease;
		z-index: 101;
	}

	.share-modal-show {
		transform: translateY(0);
	}

	.share-title {
		text-align: center;
		padding: 16px;
		font-size: 16px;
		color: #333;
		border-bottom: 1px solid #eee;
	}

	.share-options {
		display: flex;
		justify-content: center;
		align-items: center;
		height: calc(30vh - 90px);
		gap: 40px;
	}

	.share-option {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.share-icon {
		width: 60px;
		height: 60px;
		font-size: 60px;
		margin-bottom: 8px;
	}

	.share-text {
		font-size: 18px;
		color: #333;
	}

	.share-btn {
		background-color: #fff;
		border-color: fff;
	}

	.share-cancel {
		text-align: center;
	}
</style>